<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""DTD/xhtml1-strict.dtd">
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="/WEB-INF/c.tld" prefix="c"%>
<%@taglib uri="/WEB-INF/fmt.tld" prefix="fmt"%>
<%@taglib uri="/WEB-INF/fn.tld" prefix="fn"%>
<%@taglib uri="/WEB-INF/el.tld" prefix="el"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<c:import url="/includes/css_inc.jsp"/>
		<c:import url="/includes/js_inc.jsp"/>
		<script>
			$(function(){
				var dhtml = new DHTML();
		        $("#allocateYear").change(function(){
		        	$('#allocateCode')
					.find('option')
				    .remove()
				    .end()
				    .append('<option value=""></option>')
				    .val('');
					$('#allocateCodeSpan input').val("");
						$.ajax({
							type: "post",
							url: "/provacc/acc67",
							dataType: "json",
							async: false,
						    cache: false,
							data: {
								app: "ajax",
								job: "getAllocate",
								budgetYear: $("#allocateYear").val()
							},
							success: function(data) {
								if(data.length > 0){
									for(var i=0;i<data.length;i++){
										dhtml.createElement(document.getElementById("allocateCode"), ["option","value="+data[i].code], data[i].code +" - "+ data[i].name);
									}
								}else{
									return false;
								}
							}
						});
		        	});
		        $("#provinceId").change(function(){
					$('#venderCode')
					.find('option')
				    .remove()
				    .end()
				    .append('<option value=""></option>')
				    .val('');
					$('#venderCodeSpan input').val("");
					$.ajax({
						type: "post",
						url: "${pageContext.request.contextPath}/acc67",
						dataType: "json",
						cache: false,
						data: {
							app: "ajax",
							job: "getVenderByProvinceId",
							provinceId : $("#provinceId").val(),
							venderType : "C"
						},
						success: function(data) {
							if(data.length>0){
								for(var i=0;i<data.length;i++){
									dhtml.createElement(document.getElementById("venderCode"), ["option","value="+data[i].code],data[i].name);
								}
							}
						}
					});
				});
		        $("#btnSearch").button({
		            icons: {
		                primary: "ui-icon-search"
		            }
		        }).click(function(){
					if(validateEmpty()){
						$("#searchForm").submit();
					}
				});
		        $("#venderCode").combobox();
		        $("#venderCode option[value='${venderCode}']").attr("selected", "selected");
		        $("#allocateCode").combobox();
		        $("#allocateCode option[value='${allocateCode}']").attr("selected", "selected");
			});
			function getData(){
				if ('${job}' == 'search') {
					var dhtml = new DHTML();
					var allocateName = "";
					var venderName = "";
					$('#allocateCode')
					.find('option')
				    .remove()
				    .end()
				    .append('<option value=""></option>');
					$('#allocateCodeSpan input').val("");
						$.ajax({
							type: "post",
							url: "/provacc/acc67",
							dataType: "json",
							async: false,
						    cache: false,
							data: {
								app: "ajax",
								job: "getAllocate",
								budgetYear: "${allocateYear}"
							},
							success: function(data) {
								if(data.length > 0){
									for(var i=0;i<data.length;i++){
										if (data[i].code == '${allocateCode}') {
											dhtml.createElement(document.getElementById("allocateCode"), ["option","value="+data[i].code,"selected=selected"], data[i].code +" - "+ data[i].name);
											allocateName = data[i].code +" - "+ data[i].name;
										}else {
											dhtml.createElement(document.getElementById("allocateCode"), ["option","value="+data[i].code], data[i].code +" - "+ data[i].name);
										}
									}
								}
							}
						});
						$('#venderCode')
						.find('option')
					    .remove()
					    .end()
					    .append('<option value=""></option>');
						$('#venderCodeSpan input').val("");
						$.ajax({
							type: "post",
							url: "${pageContext.request.contextPath}/acc67",
							dataType: "json",
							cache: false,
							async: false,
							data: {
								app: "ajax",
								job: "getVenderByProvinceId",
								provinceId : "${provinceId}",
								venderType : "C"
							},
							success: function(data) {
								if(data.length>0){
									for(var i=0;i<data.length;i++){
										if (data[i].code == '${venderCode}') {
											dhtml.createElement(document.getElementById("venderCode"), ["option","value="+data[i].code,"selected=selected"],data[i].name);
											venderName = data[i].name;
										} else {
											dhtml.createElement(document.getElementById("venderCode"), ["option","value="+data[i].code],data[i].name);
										}
									}
								}
							}
						});
					$("#venderCode").combobox();
				    $("#allocateCode").combobox();
					$('#venderCodeSpan input').val(venderName);
					$('#allocateCodeSpan input').val(allocateName);
					$("#job").val("search");
				}
			}
		</script>
	</head>
	<body onload="getData();">
		<c:import url="/apps/msg.jsp"/>
		<form class="acc67-form" name="searchForm" id="searchForm" action="${pageContext.request.contextPath}/acc6" method="post">
		<input type="hidden" name="app" id="app" value="ACC60403"/>
		<input type="hidden" name="job" id="job" value="search"/>
		<table width="100%" class="ui-widget ui-widget-content" border="0">
			<tr>
				<th align="left" class="acc67-header ui-widget-header" colspan="2"><b>${screenCode.ACC60403}</b></th>
			</tr>
			<tr>
				<td class="bold">จังหวัด : </td>
				<td>
					<c:if test="${userInfo.areaLevel =='3'}">
						<c:forEach var="data" items="${userInfo.listUserProvice}">
							${data.provinceName}
							<input type="hidden" name="provinceId" id="provinceId" value="${data.provinceId}">
						</c:forEach>
					</c:if>
					<c:if test="${userInfo.areaLevel=='1' || userInfo.areaLevel=='2'}">
						<select name="provinceId" id="provinceId">
							<option value="">----- เลือก -----</option>
							<c:forEach var="data" items="${userInfo.listUserProvice}">
								<c:if test="${data.provinceId == provinceId}" var="provinceSeleted"/>
								<option value="${data.provinceId}" ${provinceSeleted?'selected':''}>${data.provinceName}</option>
							</c:forEach>
						</select>
						<span id="$provinceId" class="red">*</span>
					</c:if>
				</td>
			</tr>
			<tr>
				<td class="bold">ปีที่ออกรายงาน : </td>
				<td>
					<select name="budgetYear" id="budgetYear">
						<option value="">----- เลือก -----</option>
						<c:forEach items="${lsBudgetYear}" var="data">
							<c:if test="${budgetYear == data.BUDGET_YEAR}" var="selected"/>
							<option value="${data.BUDGET_YEAR}" ${selected?'selected':''}>${data.BUDGET_YEAR}</option>
						</c:forEach>
					</select>
					<span id="$budgetYear" class="red">*</span>
				</td>
			</tr>
			<%-- <tr>
				<td class="bold">หน่วยบริการ/คู่สัญญา : </td>
				<td>
					<span id="venderCodeSpan">
						<select name="venderCode" id="venderCode">
							<c:forEach items="${lsVender}" var="lsVenderData">
								<c:if test="${lsVanderData.ALLOCATE_CODE == venderCode}" var="isSelected"/>
								<option value="${lsVanderData.ALLOCATE_CODE}" ${isSelected?'selected':''}></option>
							</c:forEach>
						</select>
					</span>
				</td>
			</tr> --%>
			<tr>
				<td class="bold">เดือน :  </td>
				<td>
					<select name="mm" id="mm">
						<option value="">----- เลือก -----</option>
							<option value="10" ${'10' == mm?'selected':''}>ตุลาคม</option>
							<option value="11" ${'11' == mm?'selected':''}>พฤศจิกายน</option>
							<option value="12" ${'12' == mm?'selected':''}>ธันวาคม</option>
							<option value="01" ${'01' == mm?'selected':''}>มกราคม</option>
							<option value="02" ${'02' == mm?'selected':''}>กุมภาพันธ์</option>
							<option value="03" ${'03' == mm?'selected':''}>มีนาคม</option>
							<option value="04" ${'04' == mm?'selected':''}>เมษายน</option>
							<option value="05" ${'05' == mm?'selected':''}>พฤษภาคม</option>
							<option value="06" ${'06' == mm?'selected':''}>มิถุนายน</option>
							<option value="07" ${'07' == mm?'selected':''}>กรกฎาคม</option>
							<option value="08" ${'08' == mm?'selected':''}>สิงหาคม</option>
							<option value="09" ${'09' == mm?'selected':''}>กันยายน</option>
					</select>
					<span id="$mm" class="red">*</span>
				</td>
			</tr>
			<tr>
				<td class="bold">รหัสเงินงบประมาณ : </td>
				<td>
					<select name="allocateYear" id="allocateYear">
						<option value="">----- เลือก -----</option>
						<c:forEach items="${lsBudgetYear}" var="data">
							<c:if test="${allocateYear == data.BUDGET_YEAR}" var="selected"/>
							<option value="${data.BUDGET_YEAR}" ${selected?'selected':''}>${data.BUDGET_YEAR}</option>
						</c:forEach>
					</select>
					<span id="$budgetYear" class="red">*</span>
				</td>
			</tr>
			<tr>
				<td class="bold">กองทุนย่อยเฉพาะด้าน : </td>
				<td>
					<span id="allocateCodeSpan">
						<select name="allocateCode" id="allocateCode">
							<c:forEach items="${lsAllocate}" var="lsAllocateData">
								<c:if test="${lsAllocateData.ALLOCATE_CODE == allocateCode}" var="isSelected"/>
								<option value="${lsAllocateData.ALLOCATE_CODE}" ${isSelected?'selected':''}>${lsAllocateData.ALLOCATE_CODE} - ${lsAllocateData.ALLOCATE_NAME}</option>
							</c:forEach>
						</select>
					</span>
				</td>
			</tr>
			<tr>
				<td align="center" colspan="2">
					<button type="button" name="btnSearch" id="btnSearch" class="acc67-button"> ค้นหาข้อมูล </button>
					<!-- <button type="button" name="btnExport" id="btnExport" class="acc67-button"> Download </button> -->
				</td>
			</tr>
		</table>
		<br/>
		<c:if test="${!empty listData}">
			<c:set var="sumTax" value="0"/>
			<table width="100%" class="acc67-grid ui-widget ui-widget-content" border="0">
				<tr>
					<th align="center" class="ui-state-default" width="20%">รหัส - ชื่อแจ้งจัดสรรเงินให้คู่สัญญา</th>
					<th align="center" class="ui-state-default" width="20%">หน่วยบริการ/คู่สัญญา</th>
					<th align="center" class="ui-state-default" width="10%">เลขที่ Cheque</th>
					<th align="center" class="ui-state-default" width="10%">จำนวนเงินที่จ่ายให้หน่วยบริการ</th>
					<th align="center" class="ui-state-default" width="8%">ภาษี</th>
				</tr>
				<c:forEach items="${listData}" var="data" varStatus="x">
					<tr class="grid-tr-${x.count % 2}">
						<td>${data.allocateCode} - ${el:getDataUtil('AN',data.allocateCode)}</td>	
						<td>${el:getDataUtil('VN',data.venderCode)}</td>
						<td align="center">${data.chequeNo}</td>
						<td align="right"><fmt:formatNumber pattern="#,##0.00" value="${data.expenseAmount}" /></td>
						<td align="right"><fmt:formatNumber pattern="#,##0.00" value="${data.taxValue}" /></td>
					</tr>
					<c:set var="sumTax" value="${sumTax + data.taxValue}"/>
				</c:forEach>
				<tr>
					<td colspan="4" align="right">รวม</td>
					<td align="right"><fmt:formatNumber pattern="#,##0.00" value="${sumTax}" /></td>
				</tr>
			</table>
		</c:if>
		</form>
	</body>
</html>